<template>
	<view class="fun">
		<view class="fun-con">
			<view class="fun-box" @click="clickFun('searchFriend')">
				<view class="box-img">
					<image :src="require('@/static/img/main/message/fun/01.svg')"></image>
				</view>
				<view class="box-text">
					<text>搜索好友</text>
				</view>
			</view>

			<view class="fun-box" @click="clickFun('addressBook')">
				<view class="box-img">
					<image :src="require('@/static/img/main/message/fun/02.svg')"></image>
				</view>
				<view class="box-text">
					<text>通讯录</text>
				</view>
			</view>

			<view class="fun-box " @click="clickFun('systemMsg')">
				<view class="box-img fun-box-pos">
					<image :src="require('@/static/img/main/message/fun/03.svg')">
					</image>
					<view class="sysmsg-num" v-if="sysNumData != null && sysNumData != 0">
						<text>{{sysNumData}}</text>
					</view>
				</view>
				<view class="box-text">
					<text>系统消息</text>
				</view>

			</view>
		</view>
		<view class="fun-con-zw"></view>
	</view>
</template>

<script>
	export default {
		props: {
			sysNumData: {
				type: Number,
				default: 0
			}
		},
		methods: {
			clickFun(item) {
				this.$isLoginByVisitor()
				if (!uni.getStorageSync('isVisitorLogin')) {
					return
				}
				this.$emit('clickFunItem', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fun-con {
		width: 100%;
		display: flex;
		background-color: #fff;
		padding: 10px 0;
		position: fixed;
		z-index: 15;
		top: calc(50px + var(--status-bar-height));

		.fun-box {
			flex: 1;
			height: 60px;

			.box-img {
				text-align: center;
				height: 35px;

				image {
					margin-top: 6px;
					width: 23px;
					height: 23px;
				}
			}

			.box-text {
				text-align: center;

				text {
					color: #696969;
					font-size: 26rpx;
				}
			}
		}
	}

	.fun-con-zw {
		width: 100%;
		height: 80px;
	}

	.fun-box-pos {
		position: relative;

		.sysmsg-num {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background-color: red;
			color: #fff;
			text-align: center;
			line-height: 40rpx;
			z-index: 99;
			top: 0;

			font-size: 22rpx;
			left: 60%;
			transform: translateX(-40%);

		}
	}
</style>